@page "/sparkline/customization"

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample depicts the various customization options available in the sparkline component.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see various customization options available in sparklines. Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over the data points or tap on a data point in touch-enabled devices.</p>
   <p>More information about sparkline can be found in this <a target='_blank' href='https://ej2.syncfusion.com/blazor/documentation/sparkline/getting-started'>documentation section</a>.</p> 
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <div class="control-section">
        <div id="spark-container" class="row">
            <div class="cols-sample-area" align="center">
                <p>
                    <font size=4> Worldwide car sales by brand - 2017</font>
                </p>
                <table style="width:150%;">
                    <tr>
                        <td align="center">Sales Percentage</td>
                        <td>
                            <div id="percentage1" style="height: 200px;width: 200px;margin-left: 10px">
                                <SfSparkline ID="percentage1" @ref="@perSparklineRef" XName="xval" YName="yval" EnableRtl="@perRtl" DataSource=@PercentageData Type="@Syncfusion.Blazor.Charts.SparklineType.Column" ValueType="@Syncfusion.Blazor.Charts.SparklineValueType.Category" Width="200px" Height="200px" LineWidth="2">
                                    <SparklineAxisSettings MinY="@PerAxisMiny" MaxY="PerAxisMaxy" Value="@PerAxisValue">
                                        <SparklineAxisLineSettings Visible="@PerAxisLineVisible" Color="@PerAxislineColor" Width="@PerAxislineWidth">
                                        </SparklineAxisLineSettings>
                                    </SparklineAxisSettings>
                                    <SparklineMarkerSettings Fill="red" Size="5" Visible="@PerMarkerVisible"></SparklineMarkerSettings>
                                    <SparklineDataLabelSettings Visible="@PerDatalabelVisible"></SparklineDataLabelSettings>
                                    <SparklineTooltipSettings TValue="SparkData" Visible="@perTooltipVisible" Format="${xval}: ${yval}">
                                        <SparklineTrackLineSettings Visible="@perTrackLineVisible" Color="red" Width="1"></SparklineTrackLineSettings>
                                    </SparklineTooltipSettings>
                                </SfSparkline>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">Sales Count</td>
                        <td>
                            <div id="Sales1" style="height: 200px; width: 200px; margin-left: 10px">
                                <SfSparkline ID="Sales1" @ref="@salSparklineRef" XName="xval" YName="yval" DataSource=@SalData EnableRtl="@perRtl" Type="@Syncfusion.Blazor.Charts.SparklineType.Column" ValueType="@Syncfusion.Blazor.Charts.SparklineValueType.Category" Width="200px" Height="200px" LineWidth="2">
                                    <SparklineAxisSettings MinY="@SalAxisMiny" MaxY="SalAxisMaxy" Value="@SalAxisValue">
                                        <SparklineAxisLineSettings Visible="@PerAxisLineVisible" Color="@PerAxislineColor" Width="@PerAxislineWidth">
                                        </SparklineAxisLineSettings>
                                    </SparklineAxisSettings>
                                    <SparklineMarkerSettings Visible="@PerMarkerVisible" Fill="red" Size="5"></SparklineMarkerSettings>
                                    <SparklineDataLabelSettings Visible="@PerDatalabelVisible"></SparklineDataLabelSettings>
                                    <SparklineTooltipSettings TValue="SparkData" Visible="@perTooltipVisible" Format="${xval}: ${yval}">
                                        <SparklineTrackLineSettings Visible="@perTrackLineVisible" Color="red" Width="1"></SparklineTrackLineSettings>
                                    </SparklineTooltipSettings>
                                </SfSparkline>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div style="float: right; margin-right: 10px;">
        Source:
        <a href=" http://carsalesbase.com/global-car-sales-2017" target="_blank">carsalesbase.com</a>
    </div>
</div>
<div class="col-lg-4 property-section">
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id="property" style="width:100%" title="Properties">
                <tbody>
                    <tr style="height: 30px">
                        <td style="width: 50%">
                            Special Points
                        </td>
                        <td style="width: 50%">
                            <table>
                                <tr>
                                    <td style="padding: 5px;">All</td>&nbsp; &nbsp;
                                    <td style="padding-left:10px ; padding-top:10px ;">
                                        <SfCheckBox id="all" ValueChange="@AllCheckbox" Checked="@AllCheckboxChange" TChecked="bool"></SfCheckBox>

                                    </td> &nbsp; &nbsp;
                                    <td style="padding: 5px;">Negative</td>&nbsp; &nbsp;
                                    <td style="padding-left:10px ; padding-top:10px ;">
                                        <SfCheckBox id="negative" ValueChange="@NegativeCheckbox" Checked="@NegativeCheckboxChange" Disabled="@NegativeCheckboxDisable" TChecked="bool"></SfCheckBox>

                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 5px;">First</td>&nbsp; &nbsp;
                                    <td style="padding-left:10px ; padding-top:10px ;">
                                        <SfCheckBox id="first" ValueChange="@FirstCheckbox" Checked="FirstCheckboxChange" Disabled="@FirstCheckboxDisable" TChecked="bool"></SfCheckBox>

                                    </td>&nbsp; &nbsp;
                                    <td style="padding: 5px;">Last</td>&nbsp; &nbsp;
                                    <td style="padding-left:10px ; padding-top:10px ;">
                                        <SfCheckBox id="last" ValueChange="@LastCheckbox" Checked="@LastCheckboxChange" Disabled="@LastCheckboxDisable" TChecked="bool"></SfCheckBox>

                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 5px;">High</td>&nbsp; &nbsp;
                                    <td style="padding-left:10px ; padding-top:10px ;">
                                        <SfCheckBox id="high" ValueChange="@HighCheckbox" Checked="@HighCheckboxChange" Disabled="@HighCheckboxDisable" TChecked="bool"></SfCheckBox>

                                    </td>&nbsp; &nbsp;
                                    <td style="padding: 5px;">Low</td>&nbsp; &nbsp;
                                    <td style="padding-left:10px ; padding-top:10px ;">
                                        <SfCheckBox id="low" ValueChange="@LowCheckbox" Checked="@LowCheckboxChange" Disabled="@LowCheckboxDisable" TChecked="bool"></SfCheckBox>

                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td style="width: 50%">
                            Marker
                        </td>
                        <td style="width: 50% ; padding-left:10px ; padding-top:10px ;">
                            <SfCheckBox id="marker" Checked="@MarkerChanged" ValueChange="@Marker" TChecked="bool"></SfCheckBox>
                        </td>
                    </tr>
                    <tr style="height: 30px ; ">
                        <td style="width: 50%">
                            Data Label
                        </td>
                        <td style="width: 50% ; padding-left:10px ; padding-top:10px ;">
                            <SfCheckBox id="datalabel" Checked="@DatalabelChanged" ValueChange="@Datalabel" TChecked="bool"></SfCheckBox>
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td style="width: 50%">
                            Enable RTL
                        </td>
                        <td style="width: 50% ; padding-left:10px ; padding-top:10px ;">
                            <SfCheckBox id="rtl" Checked="@RtlChanged" ValueChange="@RTL" TChecked="bool"></SfCheckBox>
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td style="width: 50%">
                            Tooltip
                        </td>
                        <td style="width: 50% ; padding-left:10px ; padding-top:10px ;">
                            <SfCheckBox id="tooltip" Checked="@TooltipChanged" ValueChange="@ToolTip" TChecked="bool"></SfCheckBox>
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td style="width: 50%">
                            Track Line
                        </td>
                        <td style="width: 50% ; padding-left:10px ; padding-top:10px ;">
                            <SfCheckBox id="trackline" Checked="@TracklineChanged" ValueChange="@TrackLine" TChecked="bool"></SfCheckBox>
                        </td>
                    </tr>
                    <tr style="height: 30px">
                        <td style="width: 50%">
                            Axis Line
                        </td>
                        <td style="width: 50% ; padding-left:10px ; padding-top:10px ;">
                            <SfCheckBox id="axis1" Checked="@AxislineChanged" ValueChange="@AxisLine" TChecked="bool"></SfCheckBox>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>

    .property-text {
        font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif" !important;
        font-size: 13px !important;
        font-weight: 400 !important;
    }

    .control-section {
        min-height: 450px;
    }

    #range > * {
        padding: 0px !important;
    }

    label {
        height: 32px !important;
    }
</style>

@code {
    SfSparkline<SparkData> perSparklineRef;
    SfSparkline<SparkData> salSparklineRef;
    private Double PerAxisMiny = -10;
    private Double PerAxisMaxy = 10;
    private Double PerAxisValue = 0;
    private String PerAxislineColor = "red";
    private Double PerAxislineWidth = 2;
    private Double SalAxisMiny = 0;
    private Double SalAxisMaxy = 0;
    private Double SalAxisValue = 0;
    private Boolean PerAxisLineVisible = false;
    private Boolean perTooltipVisible = false;
    private Boolean perTrackLineVisible = false;
    private List<VisibleType> PerMarkerVisible { get; set; } = new List<VisibleType>();
    private List<VisibleType> PerDatalabelVisible { get; set; } = new List<VisibleType>();
    private Boolean perRtl = false;
    private Boolean NegativeCheckboxDisable = true;
    private Boolean LowCheckboxDisable = true;
    private Boolean HighCheckboxDisable = true;
    private Boolean FirstCheckboxDisable = true;
    private Boolean LastCheckboxDisable = true;
    private Boolean AllCheckboxChange = true;
    private Boolean NegativeCheckboxChange;
    private Boolean HighCheckboxChange;
    private Boolean LowCheckboxChange;
    private Boolean FirstCheckboxChange;
    private Boolean LastCheckboxChange;
    private Boolean MarkerChanged = false;
    private Boolean DatalabelChanged;
    private Boolean RtlChanged = false;
    private Boolean TooltipChanged;
    private Boolean TracklineChanged;
    private Boolean AxislineChanged;
    public class SparkData
    {
        public Double x { get; set; }
        public string xval { get; set; }
        public double yval { get; set; }
    }
    private List<SparkData> PercentageData = new List<SparkData>
{
        new SparkData { x = 0, xval = "AUDI", yval = 1  },
        new SparkData { x = 1, xval = "BMW", yval = 5 },
        new SparkData { x = 2, xval = "BUICK", yval = -1 },
        new SparkData { x = 3, xval = "CETROEN", yval = -6 },
        new SparkData { x = 4, xval = "CHEVROLET", yval = 0 },
        new SparkData { x = 5, xval = "FIAT", yval = 1 },
        new SparkData { x = 6, xval = "FORD", yval = -2 },
        new SparkData { x = 7, xval = "HONDA", yval = 7 },
        new SparkData { x = 8, xval = "HYUNDAI", yval = -9 },
        new SparkData { x = 9, xval = "JEEP", yval = 0 },
        new SparkData { x = 10, xval = "KIA", yval = -10 },
        new SparkData { x = 11, xval = "MAZDA", yval = 3 },
        new SparkData { x = 12, xval = "MERCEDES", yval = 13 },
        new SparkData { x = 13, xval = "NISSAN", yval = 5 },
        new SparkData { x = 14, xval = "OPEL/VHALL", yval = -6 },
        new SparkData { x = 15, xval = "PEUGEOT", yval = 0 },
        new SparkData { x = 16, xval = "RENAULT", yval = 7 },
        new SparkData { x = 17, xval = "SKODA", yval = 5 },
        new SparkData { x = 18, xval = "SUBARU", yval = 5 },
        new SparkData { x = 19, xval = "SUZUKI", yval = 11 },
        new SparkData { x = 20, xval = "TOYOTA", yval = 5 },
        new SparkData { x = 21, xval = "VOLKSWAGEN", yval = 3 },
    };
    private List<SparkData> SalData = new List<SparkData>
{
        new SparkData { x = 0, xval = "AUDI", yval = 1847613 },
        new SparkData { x = 1, xval = "BMW", yval = 2030331 },
        new SparkData { x = 2, xval = "BUICK", yval = 1465823 },
        new SparkData { x = 3, xval = "CETROEN", yval = 999888 },
        new SparkData { x = 4, xval = "CHEVROLET", yval = 3857388 },
        new SparkData { x = 5, xval = "FIAT", yval = 1503806 },
        new SparkData { x = 6, xval = "FORD", yval = 5953122 },
        new SparkData { x = 7, xval = "HONDA", yval = 4967689 },
        new SparkData { x = 8, xval = "HYUNDAI", yval = 3951176 },
        new SparkData { x = 9, xval = "JEEP", yval = 1390130 },
        new SparkData { x = 10, xval = "KIA", yval = 2511293 },
        new SparkData { x = 11, xval = "MAZDA", yval = 1495557 },
        new SparkData { x = 12, xval = "MERCEDES", yval = 2834181 },
        new SparkData { x = 13, xval = "NISSAN", yval = 4834694 },
        new SparkData { x = 14, xval = "OPEL/VHALL", yval = 996559 },
        new SparkData { x = 15, xval = "PEUGEOT", yval = 1590300 },
        new SparkData { x = 16, xval = "RENAULT", yval = 2275227 },
        new SparkData { x = 17, xval = "SKODA", yval = 1180672 },
        new SparkData { x = 18, xval = "SUBARU", yval = 1050390 },
        new SparkData { x = 19, xval = "SUZUKI", yval = 2891415 },
        new SparkData { x = 20, xval = "TOYOTA", yval = 7843423 },
        new SparkData { x = 21, xval = "VOLKSWAGEN", yval = 6639250 },
    };
    private void AllCheckbox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        AllCheckboxChange = args.Checked;
        NegativeCheckboxDisable = AllCheckboxChange;
        HighCheckboxDisable = AllCheckboxChange;
        LowCheckboxDisable = AllCheckboxChange;
        FirstCheckboxDisable = AllCheckboxChange;
        LastCheckboxDisable = AllCheckboxChange;
        PerMarkerVisible = (AllCheckboxChange && MarkerChanged) ? new List<VisibleType> { VisibleType.All } : (MarkerChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        PerDatalabelVisible = (AllCheckboxChange && DatalabelChanged) ? new List<VisibleType> { VisibleType.All } : (DatalabelChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        this.StateHasChanged();
    }
    private void Datalabel(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args1)
    {
        DatalabelChanged = args1.Checked;
        PerDatalabelVisible = (DatalabelChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        this.StateHasChanged();
    }
    private void NegativeCheckbox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args2)
    {
        NegativeCheckboxChange = args2.Checked;
        PerMarkerVisible = (NegativeCheckboxChange && MarkerChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        PerDatalabelVisible = (NegativeCheckboxChange && DatalabelChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        this.StateHasChanged();
    }

    private void LowCheckbox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args2)
    {
        LowCheckboxChange = args2.Checked;
        PerMarkerVisible = (LowCheckboxChange && MarkerChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        PerDatalabelVisible = (LowCheckboxChange && DatalabelChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        this.StateHasChanged();
    }
    private void HighCheckbox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args2)
    {
        HighCheckboxChange = args2.Checked;
        PerMarkerVisible = (HighCheckboxChange && MarkerChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        PerDatalabelVisible = (HighCheckboxChange && DatalabelChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        this.StateHasChanged();
    }

    private void FirstCheckbox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args2)
    {
        FirstCheckboxChange = args2.Checked;
        PerMarkerVisible = (FirstCheckboxChange && MarkerChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        PerDatalabelVisible = (FirstCheckboxChange && DatalabelChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        this.StateHasChanged();
    }

    private void LastCheckbox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args2)
    {
        LastCheckboxChange = args2.Checked;
        PerMarkerVisible = (LastCheckboxChange && MarkerChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        PerDatalabelVisible = (LastCheckboxChange && DatalabelChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        this.StateHasChanged();
    }
    private void Marker(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args3)
    {
        MarkerChanged = args3.Checked;
        PerMarkerVisible = (MarkerChanged) ? GetVisible() : new List<VisibleType> { VisibleType.None };
        this.StateHasChanged();
    }
    private async Task RTL(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args4)
    {
        RtlChanged = args4.Checked;
        perRtl = args4.Checked;
        await perSparklineRef.RefreshAsync();
        await salSparklineRef.RefreshAsync();
        this.StateHasChanged();
    }
    private void ToolTip(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args5)
    {
        TooltipChanged = args5.Checked;
        perTooltipVisible = args5.Checked;
        this.StateHasChanged();
    }
    private void TrackLine(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args6)
    {
        TracklineChanged = args6.Checked;
        perTrackLineVisible = args6.Checked;
        this.StateHasChanged();
    }
    private void AxisLine(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args7)
    {
        AxislineChanged = args7.Checked;
        PerAxisLineVisible = AxislineChanged;
        PerAxislineWidth = 2;
        PerAxislineColor = "red";
        this.StateHasChanged();
    }
    List<VisibleType> GetVisible()
    {
        List<VisibleType> typ = new List<VisibleType> { };
        if (AllCheckboxChange) { typ.Add(VisibleType.All); return typ; }
        if (NegativeCheckboxChange) { typ.Add(VisibleType.Negative); }
        if (HighCheckboxChange) { typ.Add(VisibleType.High); }
        if (LowCheckboxChange) { typ.Add(VisibleType.Low); }
        if (FirstCheckboxChange) { typ.Add(VisibleType.Start); }
        if (LastCheckboxChange) { typ.Add(VisibleType.End); }
        return typ;
    }
}
